<template>
  <div class="aside_container">
    <div class="left-dh">
      <!-- <span class="active">发现音乐</span> -->
      <div
        :class="['context', active==key ? 'active' : '']"
        v-for="(item, key) in aside.items"
        :key="key"
        @click="select(item.value,key)"
      >
        {{ item.context }}
      </div>
      <div class="left-mus">我的音乐</div>
      <div class="context" v-for="(item, key) in aside.lists" :key="key">
        {{ item.context }}
      </div>
      <div class="left-mus">创建的歌单</div>
      <div class="context" v-for="(item, key) in aside.listmus" :key="key">
        {{ item.context }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aside: {
        items: [
          { context: "发现音乐", value: "SliderBanner" },
          { context: "视频", value: "Video" },
          { context: "朋友", value: "Friend" },
          { context: "直播", value: "Live" },
          { context: "私人FM", value: "Live" },
        ],
        lists: [
          { context: "本地音乐", value: "Live" },
          { context: "下载管理", value: "Live" },
          { context: "我的音乐云盘", value: "Live" },
          { context: "我的电台", value: "Live" },
          { context: "我的收藏", value: "Live" },
        ],
        listmus: [{ context: "好听" }],
      },
      active: 0
    };
  },
  methods: {
    select(val,key) {
      this.active = key
      let data = {
        compName: val,
      };
      this.$emit("showWhichComFun", data); //select事件触发后，自动触发showCityName事件
    },
  },
};
</script>
<style lang="scss" scoped>

.left-dh {
  height: 100%;
  width: 10%;
  box-sizing: border-box;
  float: left;
  background: white;
  text-align: left;
  border-right: 1px solid rgba(24, 18, 18, 0.2);
  .active {
    display: block;
    margin: 5px 10px;
    background: #f6f6f7;
    font-weight: 900;
    font-size: 18px;
  }
  .context {
    margin: 10px 10px;
    font-family: Arial, Helvetica, sans-serif;
  }
  .context:hover {
    cursor: pointer;
        // display: block;
    // margin: 5px 10px;
    background: #f6f6f7;
    // font-size: 18px;
  }
  .left-mus {
    width: 100%;
    height: 20px;
    margin: 10px 10px;
    font-size: 13px;
    opacity: 0.4;
  }
}
</style>